<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    {{--        <meta name="viewport" content="width=device-width, initial-scale=1">--}}
    <meta content=" initial-scale=1.0,maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.maphilight.js"></script>
    <style>
        body {
            margin: auto;
        }

        * {
            -webkit-tap-highlight-color: transparent;
        }

        /*img {*/
        /*    width: auto;*/
        /*    height: auto;*/
        /*    max-width: 100%;*/
        /*}*/


        .cpt-mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 1;
            /*z-index: 2;*/
            display: none;
        }

        .triangle {
            width: 90px;
            height: 266px;
            background: rgb(232, 244, 237);
            box-shadow: 5px 5px 15px #ccc;
            position: fixed;
            top: 30px;
            left: 30px;
            background-color: rgba(0, 0, 0, 0.5);
            /*background: url("user-bg.png");*/
            border-radius: 5px;
            border: 1px solid #ffffff;
            /*display: none;*/
        }

        .farm-status:after {
            content: '';
            position: absolute;
            left: 10px;
            top: 198px;
            width: 0px;
            height: 0px;
            border: 6px solid red;
            border-color: transparent transparent rgb(255, 255, 255) transparent;
        }

        .title {
            padding: 8px;
            color: #ffffff;
            font-size: 12px;
            text-align: center;
        }

        .content {
            height: 160px;
            margin-top: 10px;
        }

        .content-sub {
            width: 22px;
            height: 100%;
            text-align: center;
            color: #ffffff;
            font-size: 14px;
            float: left;
            border-right: 1px solid rgb(76 72 72);
            /*padding: 4px; 只有一行文字时*/
        }

        .farm-status {
            background: #fff;
            border-radius: 0px 0px 5px 5px;
            height: 57px;
            margin-top: 8px;
            text-align: center;
            font-size: 13px;
            font-weight: 400;
            line-height: 57px;
        }

        .sounds {
            height: 30px;
            width: 90px;
            /*border: 1px solid red;*/
            position: fixed;
            left: 30px;
            top: 320px;
            font-size: 12px;
            border-radius: 15px;
            background: #ffffff;
        }

        .first {
            width: 30px;
            height: 100%;
            float: left;
            line-height: 30px;
            text-align: center;
        }

        .second {
            width: 22px;
            height: 100%;
            float: left;
            line-height: 30px;
        }

        .third {
            width: 38px;
            height: 100%;
            float: left;
            line-height: 30px;
        }

        .first img {
            width: 16px;
            height: 16px;
            vertical-align: middle;
        }

        .sounds:after {
            content: '';
            position: absolute;
            left: -8px;
            top: 10px;
            width: 0px;
            height: 0px;
            border: 6px solid red;
            border-color: transparent rgb(255, 255, 255) transparent transparent;
        }

        .tip {
            width: 90px;
            height: 350px;
            position: fixed;
            left: 30px;
            top: 0px;
            display: none;
        }
    </style>
</head>
<body>
<div>

    <!-- Image Map Generated by http://www.image-map.net/ -->
    <img src="image 4.png" usemap="#image-map">

    <map name="image-map">
        {{--        <area target="" alt="标题" title="标题" data-id="1"--}}
        {{--              coords="274,640,237,670,211,691,193,725,194,756,199,772,209,778,227,780,234,793,263,784,266,771,242,755,235,721,288,658"--}}
        {{--              shape="poly">--}}
        {{--        <area target="" alt="标题2" title="标题2" data-id="2"--}}
        {{--              coords="397,540,411,597,403,655,427,659,433,712,452,730,463,720,449,705,454,663,448,648,457,598,446,553,424,550"--}}
        {{--              shape="poly">--}}
        {{--        <area target="" alt="标题3" title="标题3" data-id="3"--}}
        {{--              coords="141,459,168,460,191,484,220,512,253,564,256,605,251,620,254,644,255,651,277,632,284,610,284,596,268,539,213,466,198,453,168,439,133,437"--}}
        {{--              shape="poly">--}}
        @if($list)
            @foreach($list as $key=>$item)
                <area alt="" data-id="{{$item['id']}}" onclick="" coords="{{$item['coords']}}" shape="poly">
            @endforeach
        @endif
    </map>
</div>
<div class="cpt-mask">

</div>
{{--弹窗--}}
<div>
{{--    <div class="tip" data-id="-1">--}}
{{--        <div class="triangle" data-id="-1">--}}
{{--            <div class="title" data-id="-1">[134号农田]</div>--}}
{{--            <div class="content" data-id="-1">--}}
{{--                <div class="content-sub" data-id="-1"></div>--}}
{{--                <div class="content-sub" data-id="-1">问渠那得清如许</div>--}}
{{--                <div class="content-sub" data-id="-1">为有源头活水来</div>--}}
{{--            </div>--}}
{{--            <div class="farm-status" data-id="-1">--}}
{{--                已售罄--}}
{{--            </div>--}}
{{--        </div>--}}
{{--        <div class="sounds" data-id="-1">--}}
{{--            <div class="first" data-id="-2"><img data-id="-2" src="sounds.png">--}}
{{--                <audio id="horse" preload="auto">--}}
{{--                    <source src="index.mp3" type="audio/mpeg">--}}
{{--                </audio>--}}
{{--            </div>--}}
{{--            <div class="second" data-id="-1">18″</div>--}}
{{--            <div class="third" data-id="-1">听乡音</div>--}}
{{--        </div>--}}
{{--    </div>--}}
    @if($list)
        @foreach($list as $key=>$item)
            <div class="tip" id="modal_{{$item['id']}}" data-id="-1">
                <div class="triangle" data-id="-1">
                    <div class="title" data-id="-1">[{{$item['id']}}号农田]</div>
                    <div class="content" data-id="-1">
                        <div class="content-sub" data-id="-1"></div>
                        @foreach($item['content'] as $value)
                        <div class="content-sub" data-id="-1">{{$value}}</div>
                        @endforeach
{{--                        <div class="content-sub" data-id="-1">为有源头活水来</div>--}}
                    </div>
                    <div class="farm-status" data-id="-1">
                        {{$item['status_tip']}}
                    </div>
                </div>
                <div class="sounds" data-id="-1">
                    <div class="first" data-id="-2" onclick="playMp3({{$item['id']}})"><img data-id="-2" src="sounds.png">
                        <audio id="horse_{{$item['id']}}" preload="auto">
                            <source src="{{$item['mp3_src']}}" type="audio/mpeg">
                        </audio>
                    </div>
                    <div class="second" data-id="-1">{{$item['mp3_time']}}</div>
                    <div class="third" data-id="-1">听乡音</div>
                </div>
            </div>
        @endforeach
    @endif
</div>
</body>
<script>
    $('img[usemap]').maphilight();
    var audio;

    function playMp3(id) {
        audio = document.getElementById('horse_'+id);

        if (audio !== null) {
            //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
            console.log(audio.paused);
            if (audio.paused) {
                audio.play();//audio.play();// 这个就是播放
            } else {
                audio.pause();// 这个就是暂停
            }
        }
    }

    function stopMp3() {

    }

    function setContent(item) {

    }

    //禁止双指放大
    document.documentElement.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
            event.preventDefault();
        }
    }, false);
    //禁止双击放大
    var lastTouchEnd = 0;
    document.documentElement.addEventListener('touchend', function (event) {
        var now = Date.now();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    }, false);

    $(document).bind("click", function (e) {
        // console.log($(e.target).data('id'));

        var _id = $(e.target).data('id');
        if (_id == -2) {
            console.log(_id)
            return false;//控制语音
        }
        if (_id == -1) {
            return false;//点击了弹窗的东西，不错任何操作
        }

        if (_id == undefined) {
            // console.log(1)
            $('.cpt-mask').css('display', 'none');
            // $('.triangle').css('display','none');
            $('.tip').css('display', 'none');
            if(audio){
                audio.pause();
                audio=null;
            }


        } else {
            // console.log(2)
            $('.cpt-mask').css('display', 'block');
            // $('.triangle').css('display','block');
            // $('.tip').css('display', 'block');
            $('#modal_'+_id).css('display', 'block');

        }
    })


</script>
</html>
